<script setup lang="ts">
  import { ref } from 'vue'

  import mobile from './components/mobile.vue'

  // 1. 标签切换
  const tabMetas = ref([
    { title: '密码登录', subTitle: '验证码登录' },
    { title: '验证码登录', subTitle: '密码登录' },
  ])
  const tabIndex = ref(0)

  const changeTabIndex = () => {
    /* 
    1 tabIndex = 0    tabIndex - 1 = -1 Math.abs(-1) => 1 
    2 tabIndex = 1    tabIndex - 1 =  0 Math.abs(0)  => 0 
    3. .....
    
     */
    // tabIndex.value = tabIndex.value - 1
    // if (tabIndex.value === 0) {
    //   tabIndex.value = 1
    // } else {
    //   tabIndex.value = 0
    // }

    tabIndex.value = Math.abs(tabIndex.value - 1)
  }

   import mobile from './components/mobile.vue'
</script>
<template>
  <view class="user-login">
    <view class="login-type">
      <view class="title">{{ tabMetas[tabIndex].title }}</view>
      <view class="type" @click="changeTabIndex">
        <text>{{ tabMetas[tabIndex].subTitle }}</text>
        <uni-icons color="#3c3e42" type="forward" />
      </view>
    </view>
    <!-- === -->
    <mobile v-if="tabIndex === 1"></mobile>
    <!-- === -->
  </view>

  <!-- 社交账号登录 -->
  <view class="social-login">
    <view class="legend">
      <text class="text">其它方式登录</text>
    </view>
    <view class="social-account">
      <view class="icon">
        <uni-icons color="#00b0fb" size="30" type="qq" />
      </view>
      <view class="icon">
        <uni-icons color="#fb6622" size="30" type="weibo" />
      </view>
      <view class="icon">
        <uni-icons color="#07C160" size="30" type="weixin" />
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
